<template>
  <div class="container">
    <div class="login">
      <p>您好，请登录</p>
    </div>

    <van-form @submit="onLogin">
      <van-field
        class="iconfont iconbianzu1"
        v-model="loginForm.mobile"
        name="mobile"
        label="手机号"
        placeholder="请输入手机号"
        :rules="rules.mobile"
      />
      <div class="code">
        <van-field
          class="iconfont iconyanzhengma"
          v-model="loginForm.code"
          name="code"
          label="验证码"
          placeholder="请输入验证码"
          :rules="rules.code"
        >
        </van-field>
        <span class="yzm" @click="getCode">获取验证码</span>
      </div>

      <p class="text">
        登录即同意 <i>《用户使用协议》</i> 和 <i>《隐私协议》</i>
      </p>
      <div style="margin: 30px">
        <van-button
          :loading="isLoading"
          loading-text="登录中..."
          round
          block
          type="danger"
          >确定</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { codeAPI, loginAPI } from '@/api'
import { mapActions, mapMutations } from 'vuex'
export default {
  data () {
    return {
      loginForm: {
        mobile: '18888881111',
        code: ''
      },
      isLoading: false,
      // 表单验证规则
      rules: {
        // 验证手机号
        mobile: [
          { required: true, message: '请填写手机号' },
          {
            pattern: /^1[2-9]\d{9}$/,
            message: '请填写正确的手机号',
            trigger: 'onBlur'
          }
        ],
        // 验证验证码
        code: [
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{4}$/, message: '请输入4位数字验证码' }
        ]
      }
    }
  },
  methods: {
    ...mapActions('user', ['getUserInfo']),
    ...mapMutations('user', ['saveToken']),

    // 获取验证码
    async getCode () {
      const res = await codeAPI({ mobile: this.loginForm.mobile })
      console.log(res)
      // 提示验证码
      if (res.data.code === 200) {
        this.$toast.success(res.data.data)
      }
    },

    // 登录
    async onLogin () {
      // console.log(data)
      // 显示正在加载图案
      this.isLoading = true
      try {
        // 调用登录方法
        const res = await loginAPI(this.loginForm)
        // console.log('res:', res)
        // 把token 存到vuex和本地
        if (res.data.code === 200) {
          // 提取token
          const token = res.data.data && res.data.data.jwt
          // console.log('token:', token)

          this.saveToken(token)
        }
        // 提示用户登录成功
        this.$toast.success('登录成功')

        // 获取用户信息
        this.getUserInfo()

        // 看路由信息里有无打回路径
        if (this.$route.query.back) {
          // 有路由信息
          this.$router.push(this.$route.query.back)
        } else {
          // 没有路由信息
          this.$router.push('/home')
        }
      } catch {
        // 到这，请求有问题
        this.$toast.fail('登录失败')
      }

      // 关闭正在加载图案
      this.isLoading = false
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  .login {
    height: 100px;
    line-height: 100px;
  }
  .code {
    display: flex;
    .yzm {
      width: 100px;
      color: #26b8d7;
      font-size: 14px;
      align-items: center;
      display: flex;
    }
  }

  .text {
    font-size: 12px;
    i {
      color: #26b8d7;
    }
  }
}
</style>
